<svg viewBox='0 0 800 320' class='fm-chart'>
  <style type='text/css'>
  <![CDATA[
  .fm-chart text, .fm-tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font: 10px sans-serif;
  }

  .fm-chart .axis .stroke {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .tick {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .label, .axis .title {
    fill: #666;
  }

  .fm-chart .axis .label {
    font-size: 10px;
  }

  .fm-chart .axis .title {
    font-size: 10px;
  }

  .fm-chart .chart-title {
    font-size: 12px;
    font-weight: bold;
  }

  .fm-chart .chart-subtitle {
    font-size: 10px;
  }

  .fm-chart text.label {
    fill: #666;
  }

  .fm-chart .legend text {
    font-size: 10px;
    fill: #333;
  }

  .fm-chart .legend text.title {
    fill: #666;
  }

  .fm-chart .line {
    fill: none;
    stroke: #000;
  }

  .fm-chart .area {
    opacity: 0.8;
  }

  .fm-chart .grid .gridline {
    stroke: #ddd;
    stroke-width: 0.02em;
  }

  .fm-chart .bar,
  .fm-chart .point,
  .fm-chart .area {
    fill: #000;
  }

  .fm-chart .bar.color6,
  .fm-chart .point.color6,
  .fm-chart .area.color6 {
    fill: #db843d;
  }

  .fm-chart .lines .line.color6 {
    strok: #db843d;
  }

  .fm-chart .bar.color5,
  .fm-chart .point.color5,
  .fm-chart .area.color5 {
    fill: #3d96ae;
  }

  .fm-chart .lines .line.color5 {
    stroke: #3d96ae;
  }

  .fm-chart .bar.color4,
  .fm-chart .point.color4,
  .fm-chart .area.color4 {
    fill: #80699b;
  }

  .fm-chart .line.color4 {
    stroke: #80699b;
  }

  .fm-chart .bar.color3,
  .fm-chart .point.color3,
  .fm-chart .area.color3 {
    fill: #89a54e;
  }

  .fm-chart .line.color3 {
    stroke: #89a54e;
  }

  .fm-chart .bar.color2,
  .fm-chart .point.color2,
  .fm-chart .area.color2 {
    fill: #aa4643;
  }

  .fm-chart .line.color2 {
    stroke: #aa4643;
  }

  .fm-chart .bar.color1,
  .fm-chart .point.color1,
  .fm-chart .area.color1 {
    fill: #4572a7;
  }

  .fm-chart .line.color1 {
    stroke: #4572a7;
  }

  .fm-chart.bar.vertical .axis.left .stroke,
  .fm-chart.bar.vertical .axis.left .tick,
  .fm-chart.bar.vertical .axis.right .stroke,
  .fm-chart.bar.vertical .axis.right .tick {
    display: none;
  }

  .fm-tooltip {
    text-align: center;
    padding: 5px 7px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    font-size: 13px;
  }
  ]]>
  </style>
  <g class='axis bottom'>
    <text x='714.583333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >A</text>
    <text x='593.750000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >B</text>
    <text x='472.916667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >C</text>
    <text x='352.083333' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >D</text>
    <text x='231.250000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >E</text>
    <text x='110.416667' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >F</text>
    <line x1='50.000000' y1='295.000000' x2='50.000000' y2='290.000000' class='tick' />
    <line x1='775.000000' y1='295.000000' x2='775.000000' y2='290.000000' class='tick' />
    <line x1='654.166667' y1='295.000000' x2='654.166667' y2='290.000000' class='tick' />
    <line x1='533.333333' y1='295.000000' x2='533.333333' y2='290.000000' class='tick' />
    <line x1='412.500000' y1='295.000000' x2='412.500000' y2='290.000000' class='tick' />
    <line x1='291.666667' y1='295.000000' x2='291.666667' y2='290.000000' class='tick' />
    <line x1='170.833333' y1='295.000000' x2='170.833333' y2='290.000000' class='tick' />
    <line x1='50.000000' y1='295.000000' x2='775.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis left'>
    <text x='40.000000' y='295.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >-21.9</text>
    <text x='40.000000' y='254.571429' style='text-anchor:end; dominant-baseline:middle;' class='label' >-8.36</text>
    <text x='40.000000' y='214.142857' style='text-anchor:end; dominant-baseline:middle;' class='label' >5.19</text>
    <text x='40.000000' y='173.714286' style='text-anchor:end; dominant-baseline:middle;' class='label' >18.7</text>
    <text x='40.000000' y='133.285714' style='text-anchor:end; dominant-baseline:middle;' class='label' >32.3</text>
    <text x='40.000000' y='92.857143' style='text-anchor:end; dominant-baseline:middle;' class='label' >45.8</text>
    <text x='40.000000' y='52.428571' style='text-anchor:end; dominant-baseline:middle;' class='label' >59.4</text>
    <text x='40.000000' y='12.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >72.9</text>
    <line x1='50.000000' y1='295.000000' x2='55.000000' y2='295.000000' class='tick' />
    <line x1='50.000000' y1='254.571429' x2='55.000000' y2='254.571429' class='tick' />
    <line x1='50.000000' y1='214.142857' x2='55.000000' y2='214.142857' class='tick' />
    <line x1='50.000000' y1='173.714286' x2='55.000000' y2='173.714286' class='tick' />
    <line x1='50.000000' y1='133.285714' x2='55.000000' y2='133.285714' class='tick' />
    <line x1='50.000000' y1='92.857143' x2='55.000000' y2='92.857143' class='tick' />
    <line x1='50.000000' y1='52.428571' x2='55.000000' y2='52.428571' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='55.000000' y2='12.000000' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='50.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='bars vertical'>
    <rect x='676.520834' y='101.258439' width='33.833333' height='26.867089' class='bar color1' fm:series='series1' fm:label='A: 34.000000, 43.000000, A: -14.000000, 54.000000' style=''></rect>
    <rect x='718.812500' y='68.420886' width='33.833333' height='202.995781' class='bar color2' fm:series='series2' fm:label='A: 34.000000, 43.000000, A: -14.000000, 54.000000' style=''></rect>
    <rect x='555.687501' y='35.583333' width='33.833333' height='80.601266' class='bar color1' fm:series='series1' fm:label='B: 38.000000, 65.000000, B: -10.000000, 58.000000' style=''></rect>
    <rect x='597.979167' y='56.479958' width='33.833333' height='202.995781' class='bar color2' fm:series='series2' fm:label='B: 38.000000, 65.000000, B: -10.000000, 58.000000' style=''></rect>
    <rect x='434.854167' y='92.302743' width='33.833333' height='8.955696' class='bar color1' fm:series='series1' fm:label='C: 43.000000, 46.000000, C: 0.000000, 63.000000' style=''></rect>
    <rect x='477.145833' y='41.553797' width='33.833333' height='188.069620' class='bar color2' fm:series='series2' fm:label='C: 43.000000, 46.000000, C: 0.000000, 63.000000' style=''></rect>
    <rect x='314.020834' y='116.184599' width='33.833333' height='14.926160' class='bar color1' fm:series='series1' fm:label='D: 33.000000, 38.000000, D: -4.000000, 53.000000' style=''></rect>
    <rect x='356.312500' y='71.406118' width='33.833333' height='170.158228' class='bar color2' fm:series='series2' fm:label='D: 33.000000, 38.000000, D: -4.000000, 53.000000' style=''></rect>
    <rect x='193.187501' y='116.184599' width='33.833333' height='50.748945' class='bar color1' fm:series='series1' fm:label='E: 21.000000, 38.000000, E: 2.000000, 41.000000' style=''></rect>
    <rect x='235.479167' y='107.228903' width='33.833333' height='116.424051' class='bar color2' fm:series='series2' fm:label='E: 21.000000, 38.000000, E: 2.000000, 41.000000' style=''></rect>
    <rect x='72.354167' y='65.435654' width='33.833333' height='65.675105' class='bar color1' fm:series='series1' fm:label='F: 33.000000, 55.000000, F: -12.000000, 53.000000' style=''></rect>
    <rect x='114.645833' y='71.406118' width='33.833333' height='194.040084' class='bar color2' fm:series='series2' fm:label='F: 33.000000, 55.000000, F: -12.000000, 53.000000' style=''></rect>
  </g>
</svg>
